<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改分享设置')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-share-edit" th:object="${sysShare}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">分享标题：</label>
            <div class="col-sm-8">
                <input name="sharetitle" th:field="*{sharetitle}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">分享小图：</label>
            <div class="col-sm-8">
                <input id="fileinput1" type="file" data-min-file-count="1"  data-theme="fas" >
                <input id="imagepath" name="imagepath" th:field="*{imagepath}" type="hidden">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">分享描述：</label>
            <div class="col-sm-8">
                <input name="sharedescription" th:field="*{sharedescription}" class="form-control" type="text">
            </div>
        </div>
        <div style="text-align:center">
            <button onclick="submitHandler()">保存</button>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">

    /*<![CDATA[*/
    var path = [[${sysShare.imagepath}]];
    /*]]>*/

    var prefix = ctx + "system/share";
    $("#form-share-edit").validate({
        focusCleanup: true
    });

    $(document).ready(function () {
        $("#fileinput1").fileinput({
            'theme': 'fas',
            overwriteInitial: false,
            initialPreviewAsData: true,
            showUpload: false,
            autoReplace: true,
            allowedFileExtensions: ["jpg","jpeg","png","gif"],
            initialPreview: [
                path
            ]
        });
        $("#fileinput1").on("filebatchselected",function(event, files) {
            var formFile = new FormData();
            formFile.append("file", files[0]);
            $.ajax({
                type: 'post',
                url: "/upload",
                cache: false,   //上传文件无需缓存
                processData: false,   // 用于对参数进行序列化处理，这里必须设为false
                contentType: false, // 必须
                data: formFile,
                success: function (res) {
                    if(res.result == "ok"){
                        $("#imagepath").val(res.data);
                    }
                }
            });
        })
    });
    function uploadFile() {
        var fileInput = document.getElementById("imagefile");
        var file = fileInput.files[0];
        var formFile = new FormData();
        formFile.append("file", file);
        $.ajax({
            type: 'post',
            url: "/upload",
            cache: false,   //上传文件无需缓存
            processData: false,   // 用于对参数进行序列化处理，这里必须设为false
            contentType: false, // 必须
            data: formFile,
            success: function (res) {
                $("#imagepath").val(res);
                $("#imagefile").after("<img src='" + res + "'>");
            }
        });
    }

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-share-edit').serialize());
            location.reload(true)
        }
    }
</script>
</body>
</html>